<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="author" content="www.frebsite.nl" />
		<meta content="width=600px user-scalable=yes" name="viewport" />
		<meta name="robots" content="noindex, nofollow" />

		<title>jQuery.mmenu &raquo; slick app look-alike sliding menus for your mobile website</title>

		<style type="text/css" media="all">
			html, body {
				padding: 0;
				margin: 0;
				height: 100%;
			}
			body
			{
				position: relative;
			}
			body, div, p {
				font-family: Arial, Helvetica, Verdana;
				font-size: 16px;
				line-height: 22px;
				color: #fff;
				-webkit-text-size-adjust: none;
			}
			body {
				background-color: #999;
			}
			a, a:link, a:active, a:visited, a:hover {
				color: #fff;
				text-decoration: underline;
			}

			#phone {
				background: #fff;
				height: 100%;
				width: 50%;
				margin-right: 285px;
				position: fixed;
				top: 0;
				right: 50%;
				z-index: 2;
			}
			#phone:before,
			#phone:after {
				content: '';
				background: #fff;
				display: block;
				width: 40px;
				height: 50%;
				position: absolute;
				right: -40px;
				z-index: 0;
			}
			#phone:before {
				bottom: 50%;
				margin-bottom: 350px;
			}
			#phone:after {
				top: 50%;
				margin-top: 350px;
			}
			#phone > div {
				background: center center no-repeat transparent;
				background-image: url();
				width: 455px;
				height: 780px;
				margin: -370px 0 0 0;
				position: absolute;
				top: 50%;
				right: -265px;
				z-index: 1;
			}
			#phone iframe {
				box-shadow: 0 0 2px rgba( 0, 0, 0, 0.4 );
				background: #eee;
				border: none;
				width: 320px;
				height: 480px;
				margin: 120px 0 0 70px;
			}
			
			#page {
				height: 100%;
				width: 100%;
				position: relative;
			}
			
			#page > div {
				width: 400px;
				padding: 10px 0 0 0;
				margin-top: -150px;
				position: relative;
				top: 50%;
				left: 50%;
			}

			h1 {
				background: 0 0 no-repeat transparent;
				background-image: url();
				text-indent: -1000px;
				width: 400px;
				height: 150px;
				overflow: hidden;
				margin: 0;
			}
			@media screen and ( min-width: 950px ) {
				.smallscreen
				{
					display: none;
				}
			}
			@media screen and ( max-width: 949px ) {
				.widescreen
				{
					display: none;
				}
				#phone
				{
					display: none;
				}
				#page > div
				{
					margin-left: -200px;
				}
			}
		</style>
	</head>
	<body>
		<div id="phone">
			<div>
				<iframe name="phone" src="docs/index.html" frameborder="0" width="320" height="480"></iframe>
			</div>
		</div>
		<div id="page">
			<div>
				<h1>mmenu</h1>
				<p>jQuery.mmenu-plugin, create slick app look-alike sliding menus for your mobile website.</p>

				<p class="widescreen">Check out the <a href="docs/examples/index.html" target="phone">examples</a>
					or some <a href="docs/themes/index.html" target="phone">color themes</a>.<br />
					Follow <a href="docs/tutorial/index.html" target="phone">this tutorial</a>
					or have a look at the <a href="docs/options/index.html" target="phone">options</a>
					and the <a href="docs/events/index.html" target="phone">custom events</a>.</p>

				<p class="smallscreen">Check out the <a href="docs/examples/index.html" target="_blank">examples</a>
					or some <a href="docs/themes/index.html" target="_blank">color themes</a>.<br />
					Follow <a href="docs/tutorial/index.html" target="_blank">this tutorial</a>
					or have a look at the <a href="docs/options/index.html" target="_blank">options</a>
					and the <a href="docs/events/index.html" target="_blank">custom events</a>.</p>

				<p>Website: <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>
			</div>
		</div>
	</body>
</html>